Showcase form #2
Conversation
…iss into showcase-form
| <span> | ||
| {{ option.title }} | ||
| <span style="float: right; color: #888;">({{ option.count }})</span> | ||
| <span v-if="option.count" style="float: right; color: #888;">({{ option.count }})</span> |
There was a problem hiding this comment.
Hiding the ({count}) text when it's not set to avoid empty ()
| #selected-option="option" | ||
| > | ||
| {{ option.title }} | ||
| <input type="hidden" :name="name" :value="option.id"> |
There was a problem hiding this comment.
Hidden input makes it possible to use the component in native <form>
| </li> | ||
| <li v-if="item.subMenu" class="tab"> | ||
| <v-menu> | ||
| <v-menu open-on-hover> |
There was a problem hiding this comment.
I made the menu to expand on hover so that Showcases in the menu is still a link but it also has child items in a submenu
| @@ -0,0 +1,150 @@ | |||
| <template> | |||
There was a problem hiding this comment.
This is direct copy from swiss design
There was a problem hiding this comment.
The input css is currently broken. There is a conflict with vuetify (which is not removed here but in main)
| @@ -0,0 +1,49 @@ | |||
| <template> | |||
There was a problem hiding this comment.
This is a copy from swiss design example plus...
| .notification-banner { | ||
| display: block; | ||
| transition-property: padding, opacity; | ||
| transition-timing-function: ease-in-out, ease-in-out; | ||
| } | ||
| .notification-banner:not([open]) { | ||
| padding: 0; | ||
| opacity: 0; | ||
| overflow: hidden; | ||
| } | ||
| .notification-banner__wrapper { | ||
| transition-property: height; | ||
| transition-duration: 0s; | ||
| } | ||
| .notification-banner:not([open]) .notification-banner__wrapper { | ||
| height: 0; | ||
| } |
There was a problem hiding this comment.
...a transition which smoothly collapses the notification when open is set from true to false
| @@ -0,0 +1,109 @@ | |||
| <template> | |||
There was a problem hiding this comment.
Also a copy from swiss design
| }, (resource, localeInstance) => { | ||
| return { | ||
| ...resource, | ||
| pref_label: resource.pref_label[localeInstance.currentLocale], |
There was a problem hiding this comment.
I could not figure out a way to use the Extended result so that translations are automatically selected
opendata.swiss/ui/nuxt.config.ts
Outdated
| }, | ||
| runtimeConfig: { | ||
| public: { | ||
| contentRoot: path.resolve(__dirname, 'content') |
There was a problem hiding this comment.
This will be used only locally to find the content dir in the repository.
feat(showcase): select and upload showcase cover image
# Conflicts: # opendata.swiss/ui/nuxt.config.ts
|
Your preview environment is deployed! 🚀 |
# Conflicts: # opendata.swiss/ui/nuxt.config.ts
tpluscode
force-pushed
the
showcase-form
branch
from
91cf693 to
96bf4b1
Compare
tpluscode
force-pushed
the
showcase-form
branch
from
96bf4b1 to
77d433a
Compare
# Conflicts: # opendata.swiss/ui/app/components/headers/OdsHeader.vue # opendata.swiss/ui/i18n/locales/de.json # opendata.swiss/ui/i18n/locales/en.json # opendata.swiss/ui/i18n/locales/fr.json # opendata.swiss/ui/i18n/locales/it.json
There was a problem hiding this comment.
I made the menu to expand on hover so that
Showcasesin the menu is still a link but it also has child items in a submenu
Now i got your problem. The new DropDownMenu is currently broken. @click.prevent is preventing the link action and the menu is never closing unless you click close. This is not good and the swiss style dropdown menu with this close button makes no sense if we open / close on hover. Do we need the "Submit Showcase" as a menu item or can we have a (+) add show case button on the showcase page?
Quite likely, a |
# Conflicts: # opendata.swiss/ui/.gitignore
# Conflicts: # opendata.swiss/ui/app/assets/main.css
tpluscode
force-pushed
the
showcase-form
branch
from
8c02db1 to
3957ea7
Compare
# Conflicts: # opendata.swiss/ui/app/assets/main.css
# Conflicts: # opendata.swiss/ui/nuxt.config.ts
* feat(showcases): dataset search in form * feat: saving dataset to submitted showcase * feat: added datasets to showcase form * revert: cosmetic changes
This PR implements the basic functionality of creating showcases with
TODO are datasets and saving to GitHub
Unlike that in decap, the submission form is flat, with the translated fields suffixed as
title-de,body-fr, etc. They are then expanded to the individual markdown files.I use the same zod schema for validation and will return translated error messages to the client.